<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$Think.config.site.title} - 设备列表</title>
    <meta name="keywords" content="{$Think.config.site.keywords}">
    <meta name="description" content="{$Think.config.site.description}">
    <link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.css" rel="stylesheet">    
    <link href="{$Think.config.site.resource_url}css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        #listtable .fa{    cursor: pointer;color: #1ab394;margin-right: 1em;}
        .btn-circle{ font-size: 20px; padding:0px;}
        .btn{ padding:0px; }
        .btn123{ padding: 5px 10px; }
    </style>
</head>

<body >
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
            <style type="text/css">.col-sm-12 label{ font-weight:300; }</style>
                <div class="ibox float-e-margins">
                    <div class="">
                        <h5>{:lang('设备列表')}</h5>
                    </div>
                    <div class="row ibox-title">
                    <form action="" method="post" name="leaseorder">
                        <label><button type="button" class="btn btn-sm btn-primary btn123" id="addBtn"> {:lang('添加机柜信息')}</button>　　</label>
                        <label >{:lang('商铺名称')}：</label>
                        <label ><input type="text" class="input-sm form-control" name="name" aria-controls="" placeholder="{:lang('输入')}{:lang('商铺名称')}"></label>　　
                        <label>{:lang('所在区域')}：</label>
                        <label ><input type="text" class="input-sm form-control" name="area" aria-controls="" placeholder="{:lang('输入')}{:lang('所在区域')}"></label>　　
                        <label >{:lang('机柜号')}：</label>
                        <label ><input type="text" class="input-sm form-control" name="cabinet_id" aria-controls="" placeholder="{:lang('输入')}{:lang('机柜号')}"></label>
                        <label><button type="submit" class="btn btn-sm btn-primary btn123"> {:lang('提交')}</button> </label>
                        </form>
                    </div>
                    <style type="text/css">
                        .btn-circle.btn-lg{ padding:0px; padding-top: 2px; width: 30px; height: 30px;border-radius:20px; font-size: 20px; }
                    </style>
                    <div class="ibox-content">
                        <table class="table table-hover" id="listtable">
                            <thead>
                                <tr> 
                                    <th>{:lang('所在商铺')}</th>
                                    <th>{:lang('所在区域')}</th>
                                    <th>{:lang('机柜号')}</th>
                                    <th>{:lang('可借')}</th>
                                    <th>{:lang('可还')}</th>
                                    <th>{:lang('机柜型号')}</th>
                                    <th>{:lang('生成二维码')}</th>
                                    <th>{:lang('状态')}</th>
                                    <th>{:lang('IP地址')}</th>
                                    <th>{:lang('模式')}</th>
                                    <th>{:lang('操作')}</th>
                                    
                                </tr>
                            </thead>
                            <tbody id="contenter">
                            <?php $a = 1;?>
                            {volist name="list" id="v"}
                                <tr data-id="{$v.id}">
                                <?php $dataa = (int)$v['heartbeattime']; ?>
                                    <td>{$v.name}</td>
                                    <td>{$v.area}{$v.addr}</td>
                                    <td>{$v.cabinet_id}</td>
                                    <td id="borrow{$a}" {if condition="($v['times'] <=240) and $v['heartbeattime'] neq '' "} class="borrow" {/if} data-id="{$v.cabinet_id}" data-title="{$a}"></td>
                                    <td id="refund{$a}" class="refund"></td>
                                    <td>{$v.model}</td>
                                    <td><i class="fa fa-qrcode qrcode" data-id="{$v.cabinet_id}"> {:lang('生成二维码')} </i></td>
                                    <td>{if condition="($v['times'] <= 240 ) and ($dataa neq '' )"} <span class="btn btn-primary btn123">{:lang('在线')}</span> {elseif  condition="($v['times'] >= 240) or ($dataa eq '') "/} <span class="btn btn-default dropdown-toggle btn123">离线</span> {else /} <span class="btn btn-danger btn123">{:lang('损坏')}</span> {/if}</td>
                                    <td>{$v.clientip}</td>
                                    <td>
                                        {switch name="v.mode"}
                                            {case value="1"}<font style="color: green">{:lang('运营')}</font>{/case}
                                            {case value="2"}<font style="color: red">{:lang('调试')}</font>{/case}
                                        {/switch}
                                    </td>
                                    <td>{if condition="($v['times'] <= 240 ) and ($dataa neq '' )"}<i class="fa fa-battery-1"> {:lang('设备详情')} </i> {/if} <i class="fa fa-edit"> 修改</i> <i class="fa fa-trash-o"> 删除</i></td>
                                    
                                </tr> 
                                <?php $a++; ?>
                            {/volist}
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="row">
                        <div class="row">

                        <div class="col-sm-12">
                            <div class="dataTables_paginate paging_simple_numbers text-center" id="DataTables_Table_0_paginate">
                                {$list->render()}
                            </div>
                        </div>
                    </div>
                    </div>

                </div>
            </div>
        </div>
        <div id="qrcode"></div>
    </div>
    <script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>
    <script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.5"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/peity/jquery.peity.min.js"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/iCheck/icheck.min.js"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/layer/layer.js"></script>

    <script>

    var layer_font;
    var $editTr;
        $(document).ready(function() {
            $("#addBtn").bind("click",function(){
                layer_font = layer.open({
                  type: 2,
                  title: "{:lang('添加机柜信息')}",
                  shadeClose: true,
                  shade: 0.8,
                  area: ['40%', '75%'],
                  content: '<?php echo \think\Request::instance()->root(); ?>/ausagent/Equipment/add' //iframe的url
                });
            });
            //设备详情
            $("#listtable").on("click",".fa-battery-1",function(){
                $editTr = $(this).closest("tr");
                var id = $editTr.data("id");
                layer_font = layer.open({
                  type: 2,
                  title: "{:lang('查看设备信息')}",
                  shadeClose: true,
                  shade: 0.8,
                  area: ['80%', '90%'],
                  content: '<?php echo \think\Request::instance()->root(); ?>/ausagent/Equipment/details?id='+id //iframe的url
                });
            });
            $('#listtable').on("click",".qrcode",function(){
                var id  = $(this).data("id");
                layer_font = layer.open({
                  type: 2,
                  title: "{:lang('查看设备信息')}",
                  shadeClose: true,
                  shade: 0.8,
                  area: ['300px', '300px'],
                  content: '<?php echo \think\Request::instance()->root(); ?>/ausagent/Equipment/createqrcode?id='+id //iframe的url
                });
                //alert(id);
            });
            //更新机柜信息
            $("#listtable").on("click",".fa-edit",function(){
                $editTr = $(this).closest("tr");
                var id = $editTr.data("id");
                layer_font = layer.open({
                  type: 2,
                  title: "{:lang('修改机柜信息')}",
                  shadeClose: true,
                  shade: 0.8,
                  area: ['40%', '70%'],
                  content: '<?php echo \think\Request::instance()->root(); ?>/ausagent/Equipment/edit?id='+id //iframe的url
                });
            });

            //删除机柜信息
            $("#listtable").on("click",".fa-trash-o",function(){
                var $tr = $(this).closest("tr");
                var id = $tr.data("id");
                layer.confirm("{:lang('确定要删除？')}", {
                    btn: ["{:lang('确定删除')}","{:lang('不删除')}"], //按钮
                    shade: false //不显示遮罩
                }, function(){
                    //确定删除
                    $.ajax({
                        type : 'POST',
                        url : '<?php echo \think\Request::instance()->root(); ?>/ausagent/Equipment/delete?id='+id,
                        dataType : 'json',
                        data : {id:id},
                        async:false,
                        success : function(result) {
                            //layer.close(layer1);
                            if(0 == result.code) {
                                $tr.remove();
                                layer.msg(result.msg, {icon: 1});
                            }  else  {
                                //删除失败
                                layer.msg(result.msg, {icon: 5});
                            }
                        },
                        error : function(){
                            res = false;
                            layer.msg("{:lang('服务器错误！请稍后重试')}", {icon: 2});
                        }
                    })
                },
                function(){
                    
                });

                
            });

           //网页加载完后,自动获取库存量 #contenter
           function update(){
                var num = $('#contenter .borrow').length;
                var i=1;
                //alert(num);
                $("#contenter .borrow").each(function(){
                    // 第一次parent找到td，第二次找到 tr
                    // 然后找到该 tr 的第 0 列，也就是 id 列，获取文本 .text();
                    var cabinet_id = $(this).data("id");
                    var id = $(this).data('title');
                    $.ajax({
                        type : 'POST',
                        url : '<?php echo \think\Request::instance()->root(); ?>/ausagent/Equipment/totales?cabinet_id='+cabinet_id,
                        dataType : 'json',
                        data : {cabinet_id:cabinet_id},
                        async:false,
                        success : function(result) {
                            //layer.close(layer1);
                            var devicenum = result.devicenum;
                            if(0 == result.code) {
                                var sum = result.msg;
                                var rest = result.devicenum - sum;
                                $('#borrow'+id).html('<a href="javascript:void();" class="btn btn-primary btn-circle">'+sum+'</a>');
                                $('#refund'+id).html('<a href="javascript:void();" class="btn btn-danger btn-circle">'+rest+'</a>');
                            } else  {
                                $('#borrow'+id).html('<a href="javascript:void();" class="btn btn-primary btn-circle">0</a>');
                                $('#refund'+id).html('<a href="javascript:void();" class="btn btn-danger btn-circle">'+devicenum+'</a>');
                            }
                        },
                    })
                    // 这里实现你的方法
                })

           }
            window.onload=update(); 
           var  ref = setInterval(function(){
                    update();
                    
            },500000);
            


          }); 
     //setTimeout("location=location; ", 15000);   
     
    </script>
    <!--统计代码，可删除-->

</body>

</html>
